<template>
  <page-wrap
    :show-top="showTop"
    :title="categoryName"
    back
    :previewId="{ sharePersonId, mpaActivityId }"
    hideTab
  >
    <view class="content" :style="'padding-top:' + navHeight + 'px;'">
      <view class="firstCategory" v-if="secondList.length">
        <u-tabs
          :current="currentSecond"
          :list="secondList"
          name="selfName"
          @change="handleSecondClick"
          bg-color="#F4F6F8"
          :gutter="22"
          :activeItemStyle="itemStyle"
          :inactive-color="'#555555'"
        ></u-tabs>
      </view>
      <view class="bottomContainer" v-if="secondList.length">
        <view class="secondCategory">
          <u-tabs
            :current="currentThird"
            :list="threeList"
            name="selfName"
            @change="handleThirdClick"
            :height="64"
            :gutter="22"
            :show-bar="false"
            class="list2"
            :activeItemStyle="activeItemStyle"
            font-size="26"
            :inactive-color="'#888888'"
          >
          </u-tabs>
        </view>
        <view class="reportList">
          <scroll-view scroll-y @scrolltolower="loadMore">
            <reportItem
              v-for="item in report_list"
              :isPreview="true"
              :key="item.mpaActivityId"
              :reportItem="item"
            />
            <u-loadmore v-if="reportList.length || !loaded" class="list-more" :status="moreLoading" :load-text="loadText" />
            <Empty v-if="loadEnd && !reportList.length" :baseImg="emptyImg" text="暂无列表~" :fontWeight="400" />
          </scroll-view>
        </view>
      </view>
      <u-loading-page :loading="loading"></u-loading-page>
    </view>
  </page-wrap>
</template>

<script>
import {
  reqGetMajorTreeById,
  reqGetIndexReportList,
} from "@/api/modules/report";
import reportItem from "@/components/reportItem/index.vue";

import Empty from "@/components/Empty.vue";
export default {
  components: {
    reportItem,
    Empty,
  },
  data() {
    return {
      navHeight: 0,
      loading: false,
      currentSecond: 0,
      currentThird: 0,
      majorId: "",
      categoryName: "",
      secondMajorId: null,
      ThirdMajorId: null,
      activeItemStyle: {
        // "height": "64rpx",
        "font-weight": "bold",
        background: "#f2f5f9",
        "border-radius": "34rpx",
        color: "#222222 !important",
        "font-size": "28rpx",
      },
      itemStyle: {
        "font-size": "32rpx",
        "font-weight": "bold",
        color: "#222222 !important",
        "line-height": "80rpx",
      },
      option: {
        auto: true,
        size: 15,
        page: 0,
        emptyImage:
          "https://upload.yl1001.com/upload/images/view?file=GDe_d9=SLdFymXFSOYlCXA83x-PTFQR1C_NYMN/dLY,4MdVhX_01B/B5qxvuZ.png",
        emptyText: "没有找到匹配结果",
      },
      report_list: [],
      secondList: [],
      threeList: [],
      typeLevel: 1,
      page: 0,
      size: 15,
      categoryInfo: {},
      moreLoading: "loadmore",
      loadText: {
        loadmore: "加载更多",
        loading: "加载中",
        nomore: "已经到底啦",
      },
      pageParams: {
        pageNo: 0,
        pageSize: 20,
      },
      loaded: false,
    };
  },
  onHide() {},
  watch: {
    ThirdMajorId: {
      immediate:true,
      deep: true,
      handler(newValue, oldValue) {
        if (newValue != null && newValue !== oldValue) {
          this.refresh({ page: this.page, size: this.size });
        }
      },
    },
  },
  computed: {
    personId() {
      return uni.getStorageSync("person-id").slice(2) || undefined;
    },
  },
  created() {
    this.navHeight = getApp().globalData.navHeight;
  },
  mounted() {
    this.categoryInfo = (uni.getStorageSync("categoryInfo")  &&  JSON.parse(uni.getStorageSync("categoryInfo")) ) || {};
    if (this.categoryInfo && this.categoryInfo.categoryName ) {
      // console.log(this.categoryInfo);
      this.categoryName = this.categoryInfo.categoryName;
      this.majorId = this.categoryInfo.majorId;
    }
    this.getSecondMajorList(this.majorId);
    this.getData();
  },
  onLoad(opt) {
    this.majorId = opt.majorId;
    this.categoryName = opt.categoryName;
  },
  methods: {
    loadMore() {
      this.getData(true);
    },
    handleBackClick() {
      uni.navigateBack();
    },
    refresh(paging) {
      const params = {
        pageNo: 0,
        pageSize: paging.size || this.size,
        moduleType: "OCCUPATION_MODULE_TYPE",
        personId: this.personId,
        typeLevel: this.typeLevel,
        majorId: this.majorId,
      };
      reqGetIndexReportList(params, this.personId)
        .then((res) => {
          this.page = res.pageparam.pageNo;
          this.size = res.pageparam.pageSize;
          this.report_list = res.data;
          this.$refs.list.refreshSuccess({
            list: this.report_list,
            total: res.pageparam.sums,
          });
        })
        .catch((e) => {
          this.$refs.list.refreshFail();
        });
    },
    getData(isMore) {
      if (this.moreLoading == "loading" || this.moreLoading == "nomore") return;
      const params = {
        pageNo: this.pageParams.pageNo,
        pageSize: this.pageParams.pageSize,
        moduleType: "OCCUPATION_MODULE_TYPE",
        typeLevel: this.typeLevel,
        personId: this.personId,
        majorId: this.majorId,
      };
      this.moreLoading = "loading";
      reqGetIndexReportList(params, this.personId)
        .then((res) => {
          this.moreLoading = "loadmore";
          this.loaded = true;
          if (res && res.code == 200) {
            if (isMore) {
              this.report_list.push(...res.data);
            } else {
              this.report_list = res.data;
            }
            this.pageParams.pageNo++;
            if (this.pageParams.pageNo > res.pageparam.pages) {
              this.moreLoading = "nomore";
            }
          } else {
            this.moreLoading = "nomore";
            uni.showToast({
              title: res.status_desc,
              icon: "none",
            });
          }
        })
        .catch((e) => {
          this.$refs.list.loadFail();
        });
    },
    getSecondMajorList(marjorId) {
      this.loading = true;
      reqGetMajorTreeById({ majorId: marjorId })
        .then((res) => {
          this.secondList = res.data.children;
          // console.log(this.secondList);
          this.secondMajorId = res.data.children[0].selfId;
          this.threeList = res.data.children[0].children;
          //如果是从全部分类页进来还要根据进来的二级，三级显示具体的二级三级列表
          const index = this.categoryInfo.index + 1;
          const _index = this.categoryInfo._index + 1;
          if (index && _index) {
            this.handleSecondClick(index);
            this.handleThirdClick(_index);
            uni.removeStorageSync("categoryInfo");
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    getIndexReportList(marjorId) {
      this.loading = true;
      let params = {
        majorId: marjorId,
        typeLevel: this.typeLevel,
        personId: this.personId,
      };
      reqGetIndexReportList(params, this.personId)
        .then((res) => {
          this.report_list = res.data;
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleSecondClick(index) {
      this.currentSecond = index;
      this.handleThirdClick(0);
      const item = this.secondList[index];

      this.majorId = item.selfId;
      this.threeList = item.children;
      this.typeLevel = item.level;
    },
    handleThirdClick(index) {
      this.currentThird = index;
      const item =
        this.secondList[this.currentSecond] &&
        this.secondList[this.currentSecond].children[index];
      this.typeLevel = item.level;
      this.majorId = item.selfId;
      this.ThirdMajorId = item.selfId;
    },
    handleSearchClick() {
      uni.navigateTo({
        url: `/pages/searchCareer/index?${window.location.href.split("?")[1]}`,
      });
    },
  },
};
</script>

<style lang="scss">
.navBarContainer {
  width: 100%;
  ::v-deep.uni-navbar__header-container {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32rpx;
  }

  ::v-deep.uni-navbar__header {
    padding: 0 24rpx;
  }

  .uni-navbar__content {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .input-view {
      display: flex;
      align-items: center;
    }
  }
}
.firstCategory {
  padding-top: 20rpx;
  padding-left: 10rpx;
  background: #f4f6f8;
  &::-webkit-scrollbar {
    display: none;
  }
}
.secondCategory {
  padding-top: 30rpx;
  padding-left: 32rpx;
}
.bottomContainer {
  // height: calc(100vh - 100rpx);
  background: #ffffff;
  border-radius: 16px 16px 0px 0px;
}
::v-deep .u-tab-item {
  z-index: 999;
}
::v-deep .u-tab-bar {
  width: 40rpx !important;
  height: 16rpx !important;
  background: linear-gradient(270deg, #ffffff 0%, #ff6b53 100%) !important;
  border-radius: 8rpx !important;
  z-index: 111;
  bottom: 8rpx !important;
}
::v-deep.reportItemContainer {
  padding: 0 !important;
  margin: 36rpx auto !important;
}
::v-deep.reportItemContainer:nth-of-type(1) {
  padding-top: 12rpx;
}
::v-deep .reportImg {
  width: 164rpx !important;
  height: 180rpx !important;
}
</style>
